<!DOCTYPE html>
<html lang="en">
<head>
	<%- include('../../templates/xxui-header.ejs',{title:"按钮"}) %>
</head>
<% if (themeCode=="pure") {%>
    <body style="background-color: #FFFFFF;">
<% }else{ %>
    <body>
<% } %>
    <h2>链接按钮</h2>
    <span>链接按钮（Link Button）是使用 &lt;a>元素来创建的，所以实际上一个链接按钮（Link Button）就是一个显示为按钮样式的 &lt;a>元素。</span>
	<h3>如：</h3>
    <style>
        .demo-big-test{
            font-size: 0px;
        }
        .demo-big-test a{
            margin-left: 10px;
        }
    </style>
	<div class="demo-exp-code entry-content links">
        <!--<a href="#" class="xxui-linkbutton" data-options="iconCls:'icon-w-find',plain:true">查询</a>
        <a href="#" class="xxui-linkbutton" data-options="iconCls:'icon-w-find',plain:true" disabled>禁用</a>
        -->
        <a href="#" class="xxui-linkbutton" data-options="iconCls:'icon-w-find'" disabled>禁用</a>
        <a href="#" class="xxui-linkbutton" id="btn1">点我提示</a>
        <a href="#" class="xxui-linkbutton" data-options="iconImg:'update.png'">自定义图片按钮</a>
        <a href="#" class="xxui-linkbutton" data-options="iconCls:'icon-w-find'" style="width:200px;">自定义宽度按钮</a>
        <pre class="prettyprint hide lang-html"><code>&lt;a href="#" class="xxui-linkbutton" data-options="iconCls:'icon-w-find'" disabled>禁用&lt;/a>            
&lt;a href="#" class="xxui-linkbutton" data-options="iconCls:'icon-w-find'" style="width:200px">自定义宽度按钮&lt;/a>
&lt;a href="#" class="xxui-linkbutton" data-options="iconImg:'update.png'">自定义图片按钮&lt;/a>
&lt;a href="#" class="xxui-linkbutton" id="btn1">点我提示&lt;/a&gt;
&lt;script type="text/javascript"&gt;
    $(function () {
        $("#btn1").click(function (argument) {
            alert("你确定？");
        });
    });
&lt;/script&gt;</code></pre>
    </div>
    <h3>深色可用类</h3>
    <span>如果需要鼠标悬浮时按钮变色更深，在class中加入<code>hover-dark</code>.如病人信息条.</span>
    <div class="demo-exp-code entry-content links">
        <a href="#" class="xxui-linkbutton hover-dark" data-options="iconCls:'icon-w-find'">时间线查看</a>
        <a href="#" class="xxui-linkbutton hover-dark" >确诊</a>
        <pre class="prettyprint hide lang-html"><code>&lt;a href="#" class="xxui-linkbutton hover-dark" data-options="iconCls:'icon-w-find'">时间线查看&lt;/a>
&lt;a href="#" class="xxui-linkbutton hover-dark">确诊&lt;/a></code></pre>
    </div>

    <h3>不同色系按钮</h3>
    <span>按钮默认是蓝色，如果需要使用其它色系的按钮，在class中加入<code>green</code>、<code>yellow</code>、或者<code>red</code>，按钮就会改变色系</span>
    <br><span>其中<code>green</code>表示通过，<code>yellow</code>表示警示，<code>red</code>表示拒绝</span>
    <div class="demo-exp-code entry-content links">
        <div class="use-prettyprint lang-html">
        <a href="#" class="xxui-linkbutton">蓝色按钮</a>
        <a href="#" class="xxui-linkbutton green">绿色按钮</a>
        <a href="#" class="xxui-linkbutton yellow">黄色按钮</a>
        <a href="#" class="xxui-linkbutton red">红色按钮</a>
        </div>
    </div>
    <div class="demo-exp-code entry-content links">
        <div class="use-prettyprint lang-html">
        <a href="#" class="xxui-linkbutton" data-options='iconCls:"icon-w-stamp"'>发出申请</a>
        <a href="#" class="xxui-linkbutton green" data-options='iconCls:"icon-w-ok"'>审核通过</a>
        <a href="#" class="xxui-linkbutton yellow" data-options='iconCls:"icon-w-pause-circle"'>挂起申请</a>
        <a href="#" class="xxui-linkbutton red" data-options='iconCls:"icon-w-cancel"'>拒绝通过</a>
        </div>
    </div>

    <h3>禁用 事件处理</h3>
    <span>原来按钮禁用后，通过jq绑定的事件，还是会被触发，现增加一属性<code>stopAllEventOnDisabled</code>,当为true时，阻止事件</span>
    <br><span>通过监听生成的子元素span的点击事件，当stopAllEventOnDisabled为true，且按钮被禁用时，阻止事件冒泡</span>
    <div class="demo-exp-code entry-content">
        <a href="#" id="event1" class="xxui-linkbutton " >上一步</a>  原本的事件会触发
        <br><br>
        <a href="#" id="event2" class="xxui-linkbutton " data-options="stopAllEventOnDisabled:true">下一步</a>  属性<code>stopAllEventOnDisabled</code>为true时，事件不会触发
        <script type="text/javascript"> 
            $.parser.onComplete = function(context){
                $("#event1").click(function () {
                   alert("jquery为按钮【上一步】点击事件");
                });
                $("#event2").click(function () {
                   alert("jquery为按钮【下一步】点击事件");
                });
                $("#event1").linkbutton('disable');
                $("#event2").linkbutton('disable');

            };
        </script> 
        <pre class="prettyprint hide lang-html"><code></code>&lt;a href="#" id="event1" class="xxui-linkbutton " &gt;上一步&lt;/a&gt;  原本的事件会触发
&lt;br&gt;&lt;br&gt;
&lt;a href="#" id="event2" class="xxui-linkbutton " data-options="stopAllEventOnDisabled:true"&gt;下一步&lt;/a&gt;  属性&lt;code&gt;stopAllEventOnDisabled&lt;/code&gt;为true时，事件不会触发
&lt;script type="text/javascript"&gt; 
    $(function () {
        $("#event1").click(function () {
            alert("jquery为按钮【上一步】点击事件");
        });
        $("#event2").click(function () {
            alert("jquery为按钮【下一步】点击事件");
        });
        $("#event1").linkbutton('disable');
        $("#event2").linkbutton('disable');

    });
&lt;/script&gt;     </code></pre>
    </div>


    <script type="text/javascript"> 
    $(function () {
        $("#btn1").click(function (argument) {
           alert("你确定？");
        });
    });
    function goIconTab(){
        parent.addTab("图标(icon)", "icon/icon.html")
    }
    </script>   
    <h3>大图按钮</h3>
    <span>
        在<code class="atn">class</code>中加入<code class="atv">big</code>，
        同时<code class="atn">data-options</code>中加入<code class="atv">plain:true</code>可实现大图按钮功能。
        大图标定义请查看<a class="hisui-link" href="javascript:void(0);" onclick="goIconTab();">图标(icon)</a>界面
    </span>
    <h3>如：</h3>
    <div class="demo-exp-code entry-content">
        <a class="xxui-linkbutton big" data-options="iconCls:'icon-big-save',plain:true">保存</a>
        <a class="xxui-linkbutton big" data-options="iconCls:'icon-big-print',plain:true">打印</a>
        <a class="xxui-linkbutton big" data-options="iconCls:'icon-big-del',plain:true">删除</a>
        <div class="datagrid-btn-separator big"></div>
        <a class="xxui-linkbutton big" data-options="iconCls:'icon-big-unlock',plain:true">手工解锁</a>
        <!--<a class="xxui-linkbutton big" data-options="iconImg:'unlock.png',plain:true">手工解锁</a>-->
        <pre class="prettyprint hide lang-html"><code>
&lt;a class="xxui-linkbutton big" data-options="iconCls:'icon-big-save',plain:true"&gt;保存&lt;/a&gt;
&lt;a class="xxui-linkbutton big" data-options="iconCls:'icon-big-print',plain:true"&gt;打印&lt;/a&gt;
&lt;a class="xxui-linkbutton big" data-options="iconCls:'icon-big-del',plain:true"&gt;删除&lt;/a&gt;
&lt;div class="datagrid-btn-separator big"&gt;&lt;/div&gt;
&lt;a class="xxui-linkbutton big" data-options="iconCls:'icon-big-unlock',plain:true"&gt;手工解锁&lt;/a&gt;</code></pre>
    </div>
    
    <table class="table">
		<tr class="protitle">
			<th>属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>plain</td>
			<td>是否素色</td>
			<td>false</td>
			<td>为true时,按钮素色</td>
        </tr>
        <tr>
            <td>iconImg</td>
            <td>图片地址</td>
            <td>null</td>
            <td>'unlock.png'</td>
        </tr>
        <tr>
            <td>stopAllEventOnDisabled</td>
            <td>在disabled时是否阻止按钮事件</td>
            <td>false</td>
            <td>通过监听生成的子元素span的点击事件，当stopAllEventOnDisabled为true，且按钮被禁用时，阻止事件冒泡。</td>
        </tr>
        <tr>
            <td>notTrans</td>
            <td>不自动翻译与否</td>
            <td>false</td>
            <td>默认自动翻译。true表示不翻译 <code>20230801</code></td>
        </tr>
        <tr>
            <td>clickWaitingTime</td>
            <td>点击后禁用时长(毫秒)</td>
            <td>200</td>
            <td>默认禁用200毫秒后激活; 点击后把按钮设置成waiting状态，禁用再次点击<code>20231211</code></td>  
        </tr>
        <tr>
            <td>waitingAlert</td>
            <td>waiting状态的按钮再次点击时提示内容</td>
            <td>默认提示：'按钮已点击过,系统响应中,请等待...'</td>
            <td>为空时不提示<code>20231211</code></td>  
        </tr>
	</table>
	<prettyprint/>
</body>
</html>